<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Online-IDE</title>
    <script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
    <link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
    <script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron" style="position:absolute; left:0; top:0; width:100%; height:100%; ">
    <div class="container-fiuled" align="center">
        <h2 class="text-info" style="font-family: 华文中宋;font-weight:bold;font-size:49px">补拙</h2>
        <br>
        <div class="text-muted" style="font-family: 华文中宋">愿我程序猿，于此魂梦江海，万古河山之间，星火传世，奋飞不辍。</div>
    </div>

    <div style="width:100%;text-align:center" id = "formtext">
        <form action="/run" method="post">
            <div class="control" style="width:70%;margin: 10px auto;background-color: aliceblue">
            <textarea class="form-control" id="myInput" name="source" rows="15"
                      cols="180"
                      style="background-color: ghostwhite;font-family: 'Comic Sans MS'">${lastSource}</textarea>
            </div>
            <div class="control" style="width:70%;margin: 10px auto;background-color: bisque">
            <textarea style="background-color: ghostwhite;font-family: 'Comic Sans MS'" class="form-control"
                      id="mySystemIn" name="systemIn" rows="4" cols="180"
                      placeholder="System Input! 目前仅支持 new Scanner(System.in) 读取标准输入.">${lastSystemIn!}</textarea>
            </div>
            <button type="submit" class="btn btn-success" style="font-family: 宋体">
                <span class="glyphicon glyphicon-send"></span>
                点击运行
            </button>

            <button type="button" class="btn btn-default" style="font-family: 宋体" id="clearCode" onclick="fun()">
                <span class="glyphicon glyphicon-trash"></span>
                清空
            </button>


            <script type="text/javascript">
                var myInput = document.getElementById("myInput");
                str = "    ";
                if (myInput.addEventListener) {
                    myInput.addEventListener('keydown', this.keyHandler, false);
                } else if (myInput.attachEvent) {
                    myInput.attachEvent('onkeydown', this.keyHandler);
                    /* damn IE hack */
                }

                function keyHandler(e) {
                    var TABKEY = 9;
                    if (e.keyCode == TABKEY) {
                        insertText(myInput, str);
                        if (e.preventDefault) {
                            e.preventDefault();
                        }
                    }
                }

                function insertText(obj, str) {
                    if (document.selection) {
                        var sel = document.selection.createRange();
                        sel.text = str;
                    } else if (typeof obj.selectionStart === 'number' && typeof obj.selectionEnd === 'number') {
                        var startPos = obj.selectionStart,
                            endPos = obj.selectionEnd,
                            cursorPos = startPos,
                            tmpStr = obj.value;
                        obj.value = tmpStr.substring(0, startPos) + str + tmpStr.substring(endPos, tmpStr.length);
                        cursorPos += str.length;
                        obj.selectionStart = obj.selectionEnd = cursorPos;
                    } else {
                        obj.value += str;
                    }
                }
            </script>
        </form>


    </div>


    <div class="well" style="width: 70%;margin: 10px auto;background-color: ghostwhite;font-family: 'Comic Sans MS'">
        ${runResult!}
    </div>
</div>
<script>
    function fun() {
        var formtext = document.getElementById("formtext");
        for(i=0;i<formtext.getElementsByTagName("textarea").length;i++){
            formtext.getElementsByTagName("textarea")[i].value = "";
        }
    }

</script>

</body>
</html>